<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.9.0.js"></script>
<script type="text/javascript" src="js/dhtmlx/dhtmlxcommon.js"></script>
<script type="text/javascript" src="js/dhtmlx/dhtmlxcontainer.js"></script>

<script type="text/javascript" src="js/dhtmlx/dhtmlxLayout/dhtmlxlayout.js"></script>
<script type="text/javascript" src="js/dhtmlx/dhtmlxAccordion/dhtmlxaccordion.js"></script>
<script type="text/javascript" src="js/dhtmlx/dhtmlxMenu/dhtmlxmenu.js"></script>
<script type="text/javascript" src="js/dhtmlx/dhtmlxMenu/ext/dhtmlxmenu_ext.js"></script>
<script type="text/javascript" src="js/dhtmlx/dhtmlxEditor/dhtmlxeditor.js"></script>
<script type="text/javascript" src="js/dhtmlx/dhtmlxEditor/ext/dhtmlxeditor_ext.js"></script>
<script type="text/javascript" src="js/dhtmlx/dhtmlxWindows/dhtmlxwindows.js"></script>
<script type="text/javascript" src="js/dhtmlx/dhtmlxFolders/dhtmlxfolders.js"></script>
<script type="text/javascript" src="js/dhtmlx/dhtmlxToolbar/dhtmlxtoolbar.js"></script>
<script type="text/javascript" src="js/dhtmlx/dhtmlxTabbar/dhtmlxtabbar.js"></script>
<script type="text/javascript" src="js/dhtmlx/dhtmlxTabbar/dhtmlxtabbar_start.js"></script>

<link rel="stylesheet" type="text/css" href="js/dhtmlx/dhtmlxLayout/dhtmlxlayout.css">
<link rel="stylesheet" type="text/css" href="js/dhtmlx/dhtmlxLayout/skins/dhtmlxlayout_dhx_blue.css">
<link rel="stylesheet" type="text/css" href="js/dhtmlx/dhtmlxAccordion/skins/dhtmlxaccordion_dhx_blue.css">
<link rel="stylesheet" type="text/css" href="js/dhtmlx/dhtmlxMenu/skins/dhtmlxmenu_dhx_blue.css">
<link rel="stylesheet" type="text/css" href="js/dhtmlx/dhtmlxEditor/skins/dhtmlxeditor_dhx_blue.css">
<!-- <link rel="stylesheet" type="text/css" href="js/dhtmlx/dhtmlxEditor/skins/dhtmlxeditor_dhx_black.css"> -->
<link rel="stylesheet" type="text/css" href="js/dhtmlx/dhtmlxEditor/dhtmlxeditor.css">
<link rel="stylesheet" type="text/css" href="js/dhtmlx/dhtmlxMenu/skins/dhtmlxmenu_dhx_black.css">
<link rel="stylesheet" type="text/css" href="js/dhtmlx/dhtmlxWindows/dhtmlxwindows.css">
<link rel="stylesheet" type="text/css" href="js/dhtmlx/dhtmlxWindows/skins/dhtmlxwindows_dhx_black.css">
<link rel="stylesheet" type="text/css" href="js/dhtmlx/dhtmlxWindows/skins/dhtmlxwindows_dhx_blue.css">
<link rel="stylesheet" type="text/css" href="js/dhtmlx/dhtmlxFolders/dhtmlxfolders.css">
<link rel="stylesheet" type="text/css" href="js/dhtmlx/dhtmlxTabbar/dhtmlxtabbar.css">
<link rel="stylesheet" type="text/css" href="js/dhtmlx/dhtmlxToolbar/skins/dhtmlxtoolbar_dhx_blue.css">
<style>
     html, body {
        width: 100%;
        height: 100%;
        margin: 0px;
        overflow: hidden;
     }
</style>

<script>
var dhxLayout
$(function(){
	dhxLayout = new dhtmlXLayoutObject('layout', "3L", "dhx_blue");
	//dhxLayout = new dhtmlXLayoutObject(document.body, "3L", "dhx_blue");
	//dhxLayout.cells("b").hideHeader();
    //var editor1 = new dhtmlXEditor("my_editor_here");
	//editor1.setIconsPath("js/dhtmlx/dhtmlxEditor/imgs/");
	//editor1.init();
     
	//dhxLayout.cells("b").attachObject("my_editor_here");
	var dhxAccord = dhxLayout.cells("a").attachAccordion();
	dhxAccord.addItem("a1", "aa");
	dhxAccord.addItem("b1", "bb");
	dhxAccord.cells("a1").setText("this is a1");
	 dhxAccord.cells("b1").setIcon('img/addBtn.png');  
	 
	 //dhxAccord.cells('b1').attachURL("http://www.baidu.com");
	 var editor = dhxAccord.cells("a1").attachEditor(null,'js/dhtmlx/dhtmlxEditor/imgs/');
	 //editor.setIconsPath("jas/dhtmlx/dhtmlxEditor/imgs/dhxeditor_dhx_blue");
	 //editor.init();
	 //dhxAccord.cells('a1').undock();// 这个会初始化改页面中的dhtmlXWindows样式,所以会导致下面的window图标找不到
	
	dhxLayout.cells("a").setText("New Text");
	//dhxLayout.cells("b").collapse();
	//dhxLayout.cells("a").dock();
	//dhxLayout.cells("c").undock();
	//dhxLayout.cells("c").attachURL("index.html");
	//dhxLayout.cells("c").attachURL("http://www.baidu.com");
	//dhxLayout.cells("a").document.getElementById("a").innerHTML = 'fuck';
	
	 var sb = dhxLayout.attachStatusBar();
	 sb.setText("Status Bar");
	 //var bar = dhxLayout.attachToolbar();
	 //dhxLayout.cont.obj._offsetTop = 10;
	 //dhxLayout.cont.obj._offsetHeight = -50;
	 //dhxLayout.setSizes();
	 
	 var menu = dhxLayout.attachMenu();    
	  menu.addNewSibling(null, "file", "File", false); // adding the first item to the menu, "nextToId" param is null
	  menu.addNewSibling('file', "edit", "Edit", false); // adding the first item to the menu, "nextToId" param is null
     menu.addNewChild("file", 0, "file_new", "New", false); // adding a new child item
     menu.addNewChild("file", 1, "file_close", "Close", false); // adding a new child item
     menu.setHotKey("file_close", "Ctrl+G"); // setting a hotkey to a button
     menu.addNewSeparator("file_new"); // adding a separator
     menu.addNewSeparator("file"); // adding a separator
     
     menu.addCheckbox("sibling", "file_close", null, "itemId", "itemText");
     
     menu.attachEvent("onClick", function(id){
         //alert(id);
         //var isChecked = menu.getCheckboxState('itemId');
         //alert(isChecked);
         if(id == 'edit') {
        	 var dhxWins= new dhtmlXWindows();
        	 dhxWins.setSkin('dhx_black');
        	 dhxWins.setImagePath("js/dhtmlx/dhtmlxWindows/imgs/");
        	 var win = dhxWins.createWindow('w1', 400, 300, 400, 300);
        	 //dhxWins.window('w1').attachURL("http://www.baidu.com", 'false');
        	 //dhxWins.enableAutoViewport(false);
        	 //dhxWins.setViewport(100, 100, 400, 300, document.body);
        	 dhxWins.window('w1').centerOnScreen();
        	 dhxWins.window('w1').setModal(true);
        	 var sb = dhxWins.window('w1').attachStatusBar();
        	 sb.setText("Some custom text");
        	 dhxWins.window('w1').attachFolders();
         }
     });
     menu.setOpenMode("web");
     
     menu.setTooltip('edit','this is a tip');
     menu.setItemImage('edit',"img/addBtn.png");
     
     menu.attachEvent("onCheckboxClick", function(id, state, zoneId, casState){
         alert('check');
         // user-defined handler
         // ctrl
         if (casState["ctrl"] == true) {
                 alert('ctrl');
         } else {
                 // ctrl key was not pressed with click
         }
         // alt
         if (casState["alt"] == true) {
                 // alt key was pressed with click
         } else {
                 // alt key was not pressed with click
         }
         // shift
         if (casState["shift"] == true) {
                 // shift key was pressed with click
         } else {
                 // shift key was not pressed with click
         }
         return true;
     });
     
     var cmenu = new dhtmlXMenuObject("menuObj", 'dhx_black');
     cmenu.renderAsContextMenu();
     cmenu.addNewChild(null, 0, "Fileb", "right");
     // 要生成的菜单是一个div,添加到另一个div上
     cmenu.addContextZone("layout");
     //cmenu.addContextZone("a");
     
     
     var tabbar = dhxLayout.cells("b").attachTabbar();
     tabbar.setImagePath("js/dhtmlx/dhtmlxTabbar/imgs/");
     //tabbar.setSkinColors("#FFFF00","#FFFACD");
     tabbar.setSkin('modern');
     //tabbar.setStyle("dark_blue");
     tabbar.setAlign("rigth"); //left,rigth,top,bottom
     tabbar.enableTabCloseButton(true);
     tabbar.addTab("a1","Tab 1-1","100px");
     tabbar.addTab("a2","Tab 1-2","100px");
     tabbar.addTab("a3","Tab 1-3","400px");
     tabbar.setContentHTML("a1","Some static text here");
     tabbar.setHrefMode('iframe');
     tabbar.setContentHref("a2","http://www.baidu.com");
     tabbar.attachEvent("onSelect", function(id,last_id){
		alert(id);
    	 return true;
     });
     
     
});

function f() {
	//alert(dhxLayout.cells("c")._frame.contentWindow.document.getElementById("inner").innerHTML);
	// 要等加载完,访问layout中的内容
	//dhxLayout.cells("c")._frame.contentWindow.document.getElementById("inner").innerHTML = "no index";
	//alert($(dhxLayout.cells("c")._frame.contentWindow.document).find("#inner").html());
	//dhxLayout.cells("c")._frame.contentWindow.c();
	document.domain = 'baidu.com';
	var doc = dhxLayout.cells("c")._frame.contentDocument || dhxLayout.cells("c")._frame.contentWindow.document;
	alert(doc.body);
}
</script>
</head>
<body>
<!-- <div id="a" style="position:relative;">this is div</div> -->
<!-- <div id="my_editor_here" style="width: 100%; height: 300px; border: #909090 1px solid;"></div> -->
<div id="menuObj"></div>
<!-- <input type='button' onclick="f();" value="click"/> -->
<div id="layout" style="position:relative; width:100%; height:100%;">
</div>
<!-- <div id="b" style="position:absolute;">this is div</div> -->
</body>
</html>